// mini滑动切换歌曲 什么时候执行滑动切换歌曲1.歌曲展收缩播放需要2.歌曲类表中有歌曲的时候
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
import { useStore } from 'vuex'
import Bscroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
Bscroll.use(Slide) // 利用Scroll组件实现滑动切换歌曲效果
export default function useMiniSlider() {
  const sliderWrapperRef = ref(null) // 歌曲名称歌手Dom
  const slider = ref(null)
  const stroe = useStore()
  const fullScreen = computed(() => stroe.state.fullScreen) // 状态播放器
  const playlist = computed(() => stroe.state.playlist) // 播放类表
  const currentIndex = computed(() => stroe.state.currentIndex) // 歌曲下标
  const sliderShow = computed(() => { // 显示迷你播放器的时候
    return !fullScreen.value && !!playlist.value// !!意思是转换成booler类型
  })

  onMounted(() => { // Dom挂载之后
    let sliderVal
    watch(sliderShow, async (newSliderShow) => {
      if (newSliderShow) {
        await nextTick()
        if (!sliderVal) { // 是否已经有实例化了
                sliderVal = slider.value = new Bscroll(sliderWrapperRef.value, {
                  click: true,
                  scrollX: true,
                  scrollY: false,
                  probeType: 2,
                  slide: {
                    autoplay: false,
                    loop: true
                  }
                })
              sliderVal.on('slidePageChanged', ({ pageX }) => {
                stroe.commit('setCurrentIndex', pageX)
                stroe.commit('setPlayingState', true)
              })
        } else {
          sliderVal.refresh() // 重新计算
        }
        sliderVal.goToPage(currentIndex.value, 0, 0) // 横向滚动保证显示对应播放的歌曲
      }
    })
    watch(currentIndex, (newIndex) => { // 切换歌曲的时候显示对应的歌曲名称
      if (sliderVal && sliderShow.value) {
        sliderVal.goToPage(newIndex, 0, 0)
      }
    })
  })
  onUnmounted(() => {
    if (slider.value) {
      slider.value.destroy() // 销毁操作
    }
  })
  return {
    sliderWrapperRef,
    slider
  }
}
